<template>
	<view class="my">
		<view class="myinfo">

			<view class="smallflex">
				<view class="mytx">
					<image src="../../static/grtx.png" alt="" v-if="userinfo.avator == null" />
					<image :src="userinfo.avator" v-else></image>


				</view>
				<view class="">
					{{userinfo.username}}

				</view>
			</view>
			<view class="shezhi">
				<image @click="sz" src="../../static/shezhi.png" mode=""></image>
			</view>
		</view>
		<view class="kjtd">
			快捷通道
		</view>
		<view class="kdmodule">
			<view class="kdmodulelist" @click="myzl">
				<view class="icon">
					<image src="../../static/zulin.png" mode=""></image>
					<view class="kjtitle">
						我的租赁
					</view>
				</view>
			</view>
			<view class="kdmodulelist" @click="mygh">
				<view class="icon">
					<image src="../../static/huanche.png" mode=""></image>
				</view>
				<view class="kjtitle">
					还车记录
				</view>
			</view>
			<!-- <view class="kdmodulelist">
				<view class="icon">
					<image src="../../static/wdsc.png" mode=""></image>
				</view>
				<view class="kjtitle">
					我的收藏
				</view>
			</view>
			<view class="kdmodulelist">
				<view class="icon">
					<image src="../../static/wdpj.png" mode=""></image>
				</view>
				<view class="kjtitle">
					我的评价
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {}
			}
		},
		mounted() {
			this.getdata()
		},
		methods: {
			myzl() {
				uni.navigateTo({
					url: "/pages/myzl/myzl"
				})
			},
			mygh() {
				uni.navigateTo({
					url: "/pages/mygh/mygh"
				})
			},
			getdata() {
				this.userinfo = JSON.parse(window.localStorage.getItem("userinfo"));

			},
			sz() {
				uni.navigateTo({
					url: "/pages/shezhi/shezhi"
				})
			}

		}
	}
</script>

<style>
	.kjtitle {
		text-align: center;
	}

	.icon image {
		width: 30px;
		height: 30px;

	}

	.icon {
		width: 100%;
		height: auto;
		text-align: center;
	}

	.kdmodulelist:nth-child(3n) {
		margin-right: 0px !important;
	}

	.kdmodulelist {
		width: 30%;
		height: 100px;
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
		background: #fff;
		margin-right: 15px;
		border-radius: 5px;
		margin-bottom: 10px;
		padding: 10px;
		box-sizing: border-box;

	}

	.kdmodule {
		width: 100%;
		height: auto;
		display: flex;
		flex-wrap: wrap;
		margin-top: 15px;
	}

	.kjtd {
		margin-top: 15px;
		font-size: 15px;
		text-align: left;
		font-weight: bold;
	}

	.shezhi {
		width: 50px;
		height: 50px;
	}

	.shezhi image {
		width: 100%;
		height: 100%;
	}

	.smallflex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.mytx image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		vertical-align: middle;
	}

	.mytx {
		width: 50px;
		height: 50px;
		border-radius: 10%;

	}

	.myinfo {
		width: 100%;
		height: 40vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: linear-gradient(180deg, rgba(62, 206, 197, 0.85), #26bcc6);
		border-bottom-left-radius: 40vw 5.33333vw;
		overflow: hidden;

		border-bottom-right-radius: 40vw 5.33333vw;
	}

	.my {
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		background: #f3f6fe;
	}
</style>